<template>
  <page-main>
    <v-chart :option="echartsBar" autoresize class="h-96"/>
  </page-main>
</template>

<script setup lang="ts">
import 'echarts';
import VChart from 'vue-echarts';
import { ref,reactive } from 'vue';
const echartsBar = reactive({
  textStyle: {
    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
  },
  title: {
    text: 'Traffic Sources',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: [
      'Direct',
      'Email',
      'Ad Networks',
      'Video Ads',
      'Search Engines',
    ],
  },
  series: [
    {
      name: 'Traffic Sources',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { value: 335, name: 'Direct' },
        { value: 310, name: 'Email' },
        { value: 234, name: 'Ad Networks' },
        { value: 135, name: 'Video Ads' },
        { value: 1548, name: 'Search Engines' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
});

const getEchartsData =() => {
  console.log('hello')
  echartsBar.series[0].data = [
  { value: 5, name: 'Direct' },
        { value: 1, name: 'Email' },
        { value: 2, name: 'Ad Networks' },
        { value: 3, name: 'Video Ads' },
        { value: 4, name: 'Search Engines' },
  ]
};

getEchartsData();

</script>